import React, { Component } from 'react'
import './signup.scss'
import { Pagination } from 'antd';
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiGetSignLists } from "../../axios/api"
import { get } from '../../axios/localstorage';

export default class signup extends Component {

    state = {
        banner:[],

        classList:[],

        page:1,
        total:1,

        currentIndex:0,

        typeArr:[],
        type:"",
        time:'',
        price:'',
        format:'',
        timeArr:[],
        priceArr:[],
        formatArr:[],
        second:'',
        third:'',
        secondType:'',
        thirdType:'',

        showLogin:false,
        alert:false,
    }

    componentWillMount(){
        // getApiBanner()
        // .then( req =>{
        //     if(req.data.code === 1){
        //         this.setState({
        //             banner:req.data.data
        //         })
        //     }
        // }).catch( err =>{
        //     console.error(err);
        // }


        this.getData();
    }

    componentDidMount(){
        window.scroll(0,0);
    }
    
    getData=(page)=>{
        setTimeout(()=>{
            let param = {
                token:get('token'),
                type:this.state.type,
                year:this.state.time,
                page:page?page:1,
                types:get('type')?get('type'):0,
                content:get('city')?get('city'):get('mechanism'),
            }

            getApiGetSignLists(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList:data.list,
                        total:data.total,
                    })
                }
            }).catch( err =>{
                console.error(err);
            })

        },50)
    }
    
    gotoSlide=(num)=>{
        this.refs['bslide'].goTo(num);
    }

    gotoUrl=(item)=>{
        console.log(item);
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.setState({
            page
        })
        this.getData(page);
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/activityinfo?id='+id);
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoChooseType=(item)=>{
        this.setState({type:item.id});this.getData(1);
    }

    gotoChooseType2=(item)=>{
        this.setState({time:item.id});this.getData(1);
    }

    hideLoginType=()=>{
        this.setState({
            showLogin:false
        })
    }

    render() {
        return (
            <div className="signup">
                <Header loginType={this.state.showLogin} hideLoginType={this.hideLoginType}  />

                <div className='namePage'>
                    <div className='nm'>
                        <div className='nameBox'>
                            <div className='name'>
                                {/* <img alt="" src="assets/img/zuirekechneg.png" className='nimg' /> */}
                                <h1>活动报名</h1>
                                <span></span>
                                <div className='imgBox'>
                                    <img alt="" src="assets/img/Brandactivities.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className='page1' hidden style={{backgroundImage:"url('assets/img/huodongbeijing.png')"}}>
                    <div className='pm'>
                        <div className='name'>
                            <img alt="" src="assets/img/huodongbaoming.png" />
                            <h2>活动报名</h2>
                            <p>趣味活动，在线报名</p>
                        </div>
                        <div className='pbox'>
                            <div className='ptype'>
                                <h1>类型：</h1>
                                {
                                        this.state.typeArr.map((item,index)=>{
                                            return <div key={index} className={this.state.type === item.id?"active pti":"pti"} onClick={()=>{this.gotoChooseType(item)}}>{item.title}</div>
                                        })
                                    }
                            </div>
                            <div className='ptype'>
                                <h1>时间：</h1>
                                {
                                        this.state.timeArr.map((item,index)=>{
                                            return <div key={index} className={this.state.time === item.id?"active pti":"pti"} onClick={()=>{this.gotoChooseType2(item)}}>{item.title}</div>
                                        })
                                    }
                            </div>
                        </div>
                    </div>
                </div>

                <div className="main">
                    
                    <div className="cen">
                            <div className="h_course">
                              
                                <div className="none" hidden={this.state.classList.length !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类活动</p>
                                </div>
                                <div className='box' hidden={this.state.classList.length === 0}>
                                    {
                                        this.state.classList.map((item,index)=>{
                                            return <div className='card'  onClick={()=>{this.gotoPage('/signupinfo?id='+item.id)}}>
                                                        <div className='imgBox' style={{backgroundImage:"url('"+item.image+"')"}}></div>
                                                        <div className='cinfo'>
                                                            <h2>{item.title}</h2>
                                                            <div className='ctext'>{item.cont}</div>
                                                            <div className='ctime'>
                                                                <img alt="" src="assets/imgs/shijain.png" />
                                                                <p>{item.end_time}</p>
                                                                <img alt="" src="assets/img/dizhi.png" />
                                                                <p>{item.address}</p>
                                                            </div>
                                                        </div>
                                                        <div onClick={(ev)=>{ev.stopPropagation()}}>
                                                        <button hidden={!item.is_sign} className='btn2'>已报名</button>
                                                        <button hidden={item.is_sign} onClick={()=>{
                                                            
                                                            if(!get('token')){
                                                                // message.info("请先登录");
                                                                this.setState({alert:true})
                                                                return false;
                                                            }

                                                            this.gotoPage('/productSignup?id='+item.id)}}>立即报名</button>
                                                        </div>
                                                    </div>
                                    
                                        })
                                    }
                                </div>
                                <div className='r_page' hidden={this.state.classList.length === 0}>
                                    <Pagination type="primary" showSizeChanger={false} pageSize={10}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                                </div>
                            </div>
                        </div>
                </div>

                <div className='alert' hidden={!this.state.alert}>
                    <div className='abox'>
                        <h1>未登录</h1>
                        <p>您好，您暂未登录，</p>
                        <p>请登录您的个人账号后继续使用</p>
                        <div className='adiv'>
                            <button className='ad1' onClick={()=>{this.setState({alert:false})}}>取消</button>
                            <button className='ad2' onClick={()=>{this.setState({showLogin:true,alert:false})}}>去登录</button>
                        </div>
                    </div>
                </div>

                <Footer />
            </div>
        )
    }
}
